<template>
  <div>
    <van-search v-model="fileName" placeholder="请输入搜索关键词" />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        @click="showId(`${item.id}`)"
        v-for="item in list"
        :key="item.id"
        title="卷名"
        :value="item.name"
        :label="item.score !== null ? '得分：' + item.score : '得分：暂无'"
      />
    </van-list>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import audioApi from "@/api/audio/index";
export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      fileName: "",
      list: [],
      loading: false,
      finished: false,
      currentPage: 1,
      pageSize: 5,
    };
  },
  //计算属性 类似于 data 概念
  computed: {},
  //监控 data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    onLoad: async function () {
      const res = await audioApi.getListForTest(
        this.fileName,
        this.currentPage,
        this.pageSize
      );
      if (res.data.length == 0) {
        this.finished = true;
      } else {
        for (let index = 0; index < res.data.length; index++) {
          const element = res.data[index];
          this.list.push(element);
        }
        this.currentPage++;
        // 加载状态结束
        this.loading = false;
      }
    },
    showId: async function (id) {
      this.$router.push({
        path: "/learn/listening/listenTest",
        query: { id },
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有 keep-alive 缓存功能，这个函数会触发
};
</script>
<style scoped></style>
